<!--消息中心-->
<template>
    <div class="one">
        <div>
            <div><br>
                <div style="float: left;">
                    <span style="margin-left: 25px;font-size: 25px;">系统消息</span>
                </div>
                <div style="margin-right: -450px">
                    <el-button round style="margin-right: -100px" @click="clear">清空</el-button>
                </div>
                <el-divider></el-divider>
            </div>
            <div v-if="MsgList.length===0" style="height: 750px">
                <p style="font-size: 30px">暂无消息</p>
            </div>
            <div v-else-if="MsgList.length>0" style="height: 750px">
                <div style="border:1px solid pink;border-width:0 0px 1px 0px;height: 130px" v-for="(i,index) in MsgList" :key="index">
                    <div><h2>
                        <b class="el-icon-chat-dot-square" style="color: red"></b>
                        <em>{{i.content}}</em>
                        <span style="margin-left: 500px">{{i.create_time}}</span>
                        </h2>
                    </div>
                    <div style="margin-left: 40px;text-align: left;" v-for="(y,index) in i.bookNove" :key="index">
                        <p>《{{y.title}}》的作者{{y.author}}在 {{i.create_time}} 更新了：{{i.bookNovelChapter.title}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'MessageCenter',
        data() {
            return{
                MsgList:{},
            }
        },
        created() {
            this.$http.post("msg/listUserId",{uid:localStorage.getItem("id")}).then(response=>{
                console.log(response.data);
                this.MsgList=response.data;
            })
        },
        methods: {
            SafeCenter() {
                this.$router.replace('/SafeCenter')
            },
            clear(){
                if(this.MsgList.length===0){
                    this.$notify({
                        title: '失败',
                        message: '小主.已经没有消息了',
                        type: 'warning'
                    });
                }else{
                    this.$http.post("msg/clear",{uid:localStorage.getItem("id")}).then(response=>{
                        if(response.data===1){
                            this.$notify({
                                title: '成功',
                                message: '小主.消息请空完毕~',
                                type: 'warning'
                            });
                            location.reload()
                        }else{
                            this.$notify({
                                title: '失败',
                                message: '小主.消息请空失败,请检查网络！',
                                type: 'warning'
                            });
                            location.reload()
                        }
                    })
                }

            }
        }
    }
</script>


<style scoped>
    .one{
        background-color: #FFB6C1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
</style>
